<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>乳腺癌术后上肢康复评估与训练平台 — 主页</title>
  <style>
    :root { --bg:#f7f9fc; --text:#111827; --card:#fff; --border:#e5e7eb; --primary:#2563eb; --muted:#6b7280; --header-bg:#1f2937; --header-text:#fff; }
    .dark { --bg:#0f172a; --text:#e5e7eb; --card:#111827; --border:#334155; --primary:#4f46e5; --muted:#94a3b8; --header-bg:#0b1220; --header-text:#e5e7eb; }
    body { font-family: -apple-system,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif; margin:0; padding:0; background:var(--bg); color:var(--text); }
    header { background:var(--header-bg); color:var(--header-text); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
    header nav { display:flex; gap:8px; align-items:center; }
    main { padding:16px; max-width:1080px; margin:0 auto; }
    .grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
    .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,0.06); transition: transform .12s ease, box-shadow .12s ease; }
    .card:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,0.10); }
    a.button { display:inline-block; padding:10px 14px; border-radius:8px; background:var(--primary); color:var(--header-text); text-decoration:none; transition: filter .12s ease; }
    a.button:hover { filter: brightness(1.05); }
    .stat { display:flex; gap:8px; color:var(--muted); }
    .ghost { background: transparent; color: var(--header-text); border: 1px solid rgba(255,255,255,0.25); padding:8px 12px; border-radius:8px; }
    a.ghost { background: transparent; color: var(--header-text); border: 1px solid rgba(255,255,255,0.25); padding:8px 12px; border-radius:8px; text-decoration:none; }
    a.ghost:hover { border-color: rgba(255,255,255,0.5); }
  </style>
</head>
<body>
  <header>
    <h2>乳腺癌术后上肢康复评估与训练平台 — 主页</h2>
    <nav><a href="/patient" class="ghost">用户端</a><a href="/doctor" class="ghost">医生端</a></nav>
    <div class="actions"><button id="toggle-theme" class="ghost">切换主题</button></div>
  </header>
  <main>
    <div class="grid">
      <div class="card">
        <h3>平台概览</h3>
        <p class="stat">适用于乳腺癌术后上肢功能康复，关注肩关节活动度、疼痛及淋巴水肿风险。</p>
        <div id="overview">加载中...</div>
        <div style="margin-top:10px"><a href="/patient" class="button">进入用户端</a></div>
      </div>
      <div class="card">
        <h3>快速操作</h3>
        <p class="stat">可在医生端导入示例数据，并查看评估与反馈表格。</p>
        <div style="margin-top:10px"><a href="/doctor" class="button">进入医生端</a></div>
      </div>
    </div>
  </main>
  <script>
  async function loadOverview(){
    try {
      const res = await fetch('/api/stats');
      const s = await res.json();
      const el = document.getElementById('overview');
      el.textContent = `评估次数：${s.count}，平均评分：${(s.avg_score??0).toFixed(2)}，平均异常概率：${Math.round((s.avg_anomaly_prob??0)*100)}%`;
    } catch(e){
      document.getElementById('overview').textContent = '概览加载失败';
    }
  }
  loadOverview();
  const savedTheme = localStorage.getItem('theme');
  if(savedTheme === 'dark'){ document.documentElement.classList.add('dark'); }
  document.getElementById('toggle-theme').addEventListener('click', () => {
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
  </script>
</body>
</html>